<!--实时采集数据 列表-->
<template>
  <div class="base-content">
    <!-- 列表 -->
    <div class="basic-info">
      <el-form ref="filterForm" :model="filterForm" inline label-width="80px">
        <el-form-item label="样品编号" prop="sampleNum">
          <el-input
            v-model="filterForm.sampleNum"
            placeholder="请输入样品编号"
            clearable
            @keyup.enter.native="getList('filter')"
          />
        </el-form-item>

        <el-form-item label="样品名称" prop="sampleName">
          <el-input
            v-model="filterForm.sampleName"
            placeholder="请输入样品名称"
            clearable
            @keyup.enter.native="getList('filter')"
          />
        </el-form-item>
        <el-form-item label="检测人" prop="detectionPerson">
          <el-input
            v-model="filterForm.detectionPerson"
            placeholder="请输入检测人"
            clearable
            @keyup.enter.native="getList('filter')"
          />
        </el-form-item>
        <el-form-item label="检测时间" prop="detectionDateTime">
          <el-date-picker
            v-model="filterForm.detectionDateTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="设备名称" prop="instrumentName">
          <el-input
            v-model="filterForm.instrumentName"
            placeholder="请输入设备名称"
            clearable
            @keyup.enter.native="getList('filter')"
          />
        </el-form-item>
        <el-form-item label="设备编号" prop="instrumentNum">
          <el-input
            v-model="filterForm.instrumentNum"
            placeholder="请输入设备编号"
            clearable
            @keyup.enter.native="getList('filter')"
          />
        </el-form-item>
        <el-form-item label="设备型号" prop="instrumentModel">
          <el-input
            v-model="filterForm.instrumentModel"
            placeholder="请输入设备型号"
            clearable
            @keyup.enter.native="getList('filter')"
          />
        </el-form-item>
        <el-form-item label="设备IP" prop="instrumentIP">
          <el-input
            v-model="filterForm.instrumentIP"
            placeholder="请输入设备IP"
            clearable
            @keyup.enter.native="getList('filter')"
          />
        </el-form-item>

        <el-form-item class="base-filter-button">
          <el-button
            v-loading="searchLoading"
            type="primary"
            @click="getList('filter')"
            >查询</el-button
          >
          <el-button @click="cancelForm">清空</el-button>
        </el-form-item>
      </el-form>
      <!--列表-->
      <el-table
        v-loading="tableLoad"
        :data="tableData"
        tooltip-effect="dark"
        class="main-content"
        height="100%"
      >
        <el-table-column align="center" label="序号" width="50">
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column prop="sampleNum" label="样品编号" min-width="120" />
        <el-table-column
          prop="sampleName"
          label="样品名称"
          min-width="120"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="detectionDateTimeString"
          label="检测时间"
          min-width="120"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="detectionPerson"
          label="检测人"
          min-width="120"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="instrumentName"
          label="设备名称"
          min-width="120"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="instrumentNum"
          label="设备编号"
          min-width="120"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="instrumentModel"
          label="设备型号"
          min-width="120"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="instrumentIP"
          label="设备IP"
          min-width="120"
          :show-overflow-tooltip="true"
        />
        <el-table-column label="操作" width="140">
          <template slot-scope="{ row }">
            <div class="base-table-operation">
              <el-link type="primary" @click="check(row)">查看</el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <BasePagination
        :total="total"
        :current-page="pageInfo.pageIndex"
        :page-count="pageCount"
        @changePage="changePage"
        @sizeChange="sizeChange"
      />
      <!--新增/编辑/查看-->
      <DataCaptureDialog
        v-if="dialogFormVisible"
        :dialog-form-visible.sync="dialogFormVisible"
        :row-data.sync="rowData"
      />
    </div>
  </div>
</template>
<script>
import { DataCaptureList } from "../../api/ModuleDataCapture";
import DataCaptureDialog from "./DataCaptureDialog.vue";
export default {
  pageLoading: true,
  name: "DataCaptureList",
  components: {
    DataCaptureDialog,
  },
  data() {
    return {
      rowData: {},
      dialogFormVisible: false,
      filterForm: {
        sampleNum: "",
        sampleName: "",
        detectionPerson: "",
        detectionDateTime: "",
        stateDateTime: "",
        endDateTime: "",
        instrumentName: "",
        instrumentNum: "",
        instrumentModel: "",
        instrumentIP: "",
      },
      searchLoading: false,
      importVisible: false,
      tableLoad: true,
      editId: "",
      pageInfo: {
        pageIndex: 1,
        pageSize: 10,
      },
      tableData: [],
      total: 0,
      pageCount: 0,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    sizeChange(val) {
      this.pageInfo.pageIndex = 1;
      this.pageInfo.pageSize = val;
      this.getList();
    },
    // 查看
    check(row) {
      this.rowData = row;
      this.dialogFormVisible = true;
    },
    // 获取列表
    getList(flag) {
      this.searchLoading = true;
      this.tableLoad = true;
      // flag === filter 表示输入了搜索条件 从第一页开始查
      if (flag) {
        this.pageInfo.pageIndex = 1;
        this.filterForm.stateDateTime = this.filterForm.detectionDateTime[0];
        this.filterForm.endDateTime = this.filterForm.detectionDateTime[1];
      }

      // 列表
      DataCaptureList({
        ...this.filterForm,
        ...this.pageInfo,
      })
        .then((res) => {
          this.tableData = res.data.dataList;
          this.total = res.data.total;
          this.pageCount = res.data.dataList.length;
          this.tableLoad = false;
          this.searchLoading = false;
        })
        .catch(() => {
          this.tableLoad = false;
          this.searchLoading = false;
        });
    },

    // 新增/编辑/查看
    DialogCall() {
      this.getList();
    },

    // 清空筛选条件
    cancelForm() {
      this.$refs.filterForm.resetFields();
      this.filterForm.stateDateTime = null;
      this.filterForm.endDateTime = null;
      this.getList("filter");
    },
    // 切换页码
    changePage(page) {
      this.pageInfo.pageIndex = page;
      this.getList();
    },
  },
};
</script>
<style lang="scss">
.avatar-uploader {
  float: left;
}
</style>

